/*o.v.*/

.image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:250px; height:250px;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
    -moz-transition: height 0.1s; 
    -webkit-transition: height 0.1s; 
    -ms-transition: height 0.1s;  
    -o-transition: height 0.1s;  
    transition: height 0.1s;
}

.image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:250px; overflow-y:scroll;
    /*nice and smooth expand - speed this up at your preference or remove animation altogether*/
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    -ms-transition: height 0.5s;  
    -o-transition: height 0.5s;  
    transition: height 0.5s;
}
.image-dropdown input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;top:0;left:0;opacity:0;
}


.image-dropdown label[for="line1"] {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/1.png") 50% 50% no-repeat;
}
    
.image-dropdown label[for="line2"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/2.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line3"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/3.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line4"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/4.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line5"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/5.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line6"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/6.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line7"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/7.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line8"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/8.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line9"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/9.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line10"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/10.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line11"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/11.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line12"]  {
    /*style the labels to look like dropdown options/FunctionSketch/Sketch, kinda*/
    display:none; margin:2px; height:200px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Beard/12.png") 50% 50% no-repeat;
}


.image-dropdown label[for="line13"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/11.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line14"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/11.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line15"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/3.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line16"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/4.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line17"]  {/FunctionSketch/Sketch
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/5.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line18"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/6.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line19"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/7.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line20"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/8.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line21"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/9.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line22"]  {/FunctionSketch/Sketch
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/10.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line23"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Hair/11.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line24"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Nose/1.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line25"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Nose/2.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line26"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Nose/3.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line27"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Nose/4.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line28"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/Nose/5.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line0"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:1; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/noimage.png") 50% 50% no-repeat;
}


.image-dropdown label[for="line30"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:1; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/noimage.png") 50% 50% no-repeat;
}

.image-dropdown label[for="line31"]  {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:250px; opacity:1; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://localhost/ImageProcessing/images/FunnyEffect/noimage.png") 50% 50% no-repeat;
}
.image-dropdown:hover label{
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
    display:block;
}
.image-dropdown label:hover {
    opacity:0.8;
}
.image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
    opacity:1 !important; display:block;
}

.image-dropdown{
	float: left;
}

.submit{
	clear: both;
	display: block;
}
@CHARSET "UTF-8";